import React from 'react';
import { IStudent } from '../../types';
import styles from './StudentTable.module.css';

interface StudentTableProps {
  students: IStudent[];
  onEdit: (student: IStudent) => void;
  onDelete: (id: string) => void;
  onAdd: () => void;
}

const StudentTable: React.FC<StudentTableProps> = ({ students, onEdit, onDelete, onAdd }) => {
  return (
    <>
      <button className={styles.addButton} onClick={onAdd}>
        新增学生
      </button>
      <div className={styles.tableContainer}>
        <table className={styles.table}>
          <thead>
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>年级</th>
              <th>班级</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {students.length > 0 ? (
              students.map((student) => (
                <tr key={student.id}>
                  <td>{student.studentId}</td>
                  <td>{student.name}</td>
                  <td>{student.gender}</td>
                  <td>{student.grade || '-'}</td>
                  <td>{student.class || '-'}</td>
                  <td className={styles.actionCell}>
                    <button 
                      className={`${styles.actionButton} ${styles.editButton}`}
                      onClick={() => onEdit(student)}
                    >
                      编辑
                    </button>
                    <button 
                      className={`${styles.actionButton} ${styles.deleteButton}`}
                      onClick={() => onDelete(student.id)}
                    >
                      删除
                    </button>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={6} style={{ textAlign: 'center' }}>
                  暂无学生数据
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </>
  );
};

export default StudentTable;